<template>
  <el-dialog
    v-model="state.dialogVisible"
    :append-to-body="true"
    :before-close="close"
    class="dialog-container"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    top="5vh"
    :modal="model"
    :title="state.dialogTitle"
    :width="width"
  >
    <div style="max-height: 360px; padding: 0px; overflow: auto">
      <el-tree
        ref="treeRef"
        :check-strictly="true"
        :data="treeOptions.dataList"
        :default-expanded-keys="expanderKeys"
        :highlight-current="true"
        node-key="id"
        class="custom-tree"
        :props="treeOptions.props"
        :show-checkbox="multiple"
        @node-expand="handleNodeExpand"
      >
        <template #default="{ node, data }">
          <span>
            <span v-if="data.iconCls">
              <IconifyIconOnline :icon="'ri:' + data.iconCls" />
            </span>
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <template #footer>
      <el-button icon="circle-close" type="warning" @click="close">
        取消
      </el-button>
      <el-button icon="circle-check" type="primary" @click="save">
        确定
      </el-button>
    </template>
  </el-dialog>
</template>
<script setup name="MenuTreePicker">
import { queryMenuTree } from "@/api/admin/system/menu/";
import { useTree } from "@/hooks/tree";

const props = defineProps({
  title: {
    type: String,
    default: "选择菜单"
  },
  width: {
    type: String,
    default: "20%"
  },
  model: {
    type: Boolean,
    default: true
  },
  multiple: {
    type: Boolean,
    default: false
  },
  disabledKeys: {
    type: Array,
    default: function () {
      return [];
    }
  },
  expanderKeys: {
    type: Array,
    default: function () {
      return [];
    }
  }
});

const emits = defineEmits(["change"]);

const treeRef = ref(null);

const state = reactive({
  dialogTitle: props.title,
  dialogVisible: false
});

const treeOptions = reactive({
  queryForm: {},
  props: {
    children: "children",
    label: "text"
  },
  queryFunction: queryMenuTree
});

const { queryTreeData } = useTree(treeOptions, treeRef);

const handleNodeExpand = data => {
  const children = data.children;
  if (data.children && children.length > 0) {
    data.children.forEach(item => {
      if (props.disabledKeys.indexOf(item.id) > -1 || item.menuType != "1") {
        item.disabled = true;
      }
    });
  }
};

const show = params => {
  Object.assign(treeOptions.queryForm, {}, params);
  queryTreeData();
  state.dialogVisible = true;
};

const close = () => {
  treeOptions.dataList = [];
  state.dialogVisible = false;
};

const save = () => {
  let nodes;
  if (props.multiple) {
    nodes = treeRef.value.getCheckedNodes();
  } else {
    nodes = [treeRef.value.getCurrentNode()];
  }
  emits("change", nodes);
  close();
};

defineExpose({
  show,
  close,
  save
});
</script>
<style lang="scss" scoped>
.dialog-container {
  min-height: 360px !important;
  max-height: 520px !important;
  overflow: auto;
}
</style>
